<template>
  <div class="home">
    <van-nav-bar title="医院管理系统" />

    <!-- 轮播图 -->
    <van-swipe class="swipe" :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>

    <!-- 最新公告 -->
    <div class="section">
      <div class="section-header">
        <span class="title">最新公告</span>
        <!-- <van-button type="text" size="small" @click="router.push('/announcements')">
          查看更多
          <van-icon name="arrow" />
        </van-button> -->
      </div>
      <div class="announcement-list">
        <van-cell-group inset>
          <van-cell 
            v-for="item in announcements" 
            :key="item.id" 
            :title="item.title" 
            is-link 
            center
            @click="goToAnnouncementDetail(item.id)"
          >
            <template #label>
              <div class="announcement-info">
                <span>{{ formatDate(item.createTime) }}</span>
                <van-tag :type="getAnnouncementTagType(item.type)">{{ getAnnouncementType(item.type) }}</van-tag>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { getAnnouncements } from '../api'

const router = useRouter()
const announcements = ref([])

// 轮播图数据
const images = [
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
]

// 获取公告列表
const loadAnnouncements = async () => {
  try {
    const res = await getAnnouncements({
      page: 1,
      pageSize: 5
    })
    if (res.code === 200) {
      announcements.value = res.data.list
    } else {
      showToast(res.message || '获取公告列表失败')
    }
  } catch (error) {
    console.error('获取公告列表失败：', error)
    showToast('获取公告列表失败')
  }
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  const d = new Date(date)
  return d.getFullYear() + '-' + 
         String(d.getMonth() + 1).padStart(2, '0') + '-' + 
         String(d.getDate()).padStart(2, '0')
}

// 跳转到公告详情页
const goToAnnouncementDetail = (id) => {
  router.push(`/announcement/${id}`)
}

// 获取公告类型标签样式
const getAnnouncementTagType = (type) => {
  const typeMap = {
    system: 'primary',
    department: 'success',
    emergency: 'danger',
    maintenance: 'warning',
    policy: 'info'
  }
  return typeMap[type] || 'default'
}

// 获取公告类型文本
const getAnnouncementType = (type) => {
  const typeMap = {
    system: '系统公告',
    department: '科室通知',
    emergency: '紧急通知',
    maintenance: '维护通知',
    policy: '政策通知'
  }
  return typeMap[type] || '其他'
}

onMounted(() => {
  loadAnnouncements()
})
</script>

<style lang="scss" scoped>
.home {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 50px;
}

.swipe {
  margin-bottom: 16px;
  
  img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
}

.section {
  margin: 16px;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 0 4px;
    
    .title {
      font-size: 16px;
      font-weight: bold;
      color: #323233;
    }
  }
}

.announcement-list {
  .announcement-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    color: #969799;
  }
}
</style> 